<template>
  <div class="search">
    <!-- 搜索组件一级路由   $router.back()返回上一个页面-->
    <van-nav-bar
      left-arrow
      title="搜索中心"
      @click-left="$router.back()"
    />

    <!-- https://youzan.github.io/vant/#/zh-CN/search -->
    <van-search
      v-model.trim="keyword"
      show-action
      placeholder="请输入搜索关键词"
      shape="round"
      @input="GetSuggestion"
    >
      <template #action>
        <div @click="clickAddHistory">搜索</div>
      </template>
    </van-search>

    <!-- 联想建议 -->
    <van-cell-group>
      <van-cell
        v-for="(item,index) in showSuggestion"
        :key="index"
        icon="search"
      >
        <div @click="clickSuggestion(index)" v-html="item" />
      </van-cell>
    </van-cell-group>
    <!-- /联想建议 -->

    <!-- 搜索历史记录 -->
    <van-cell-group>
      <van-cell title="历史记录" />
      <van-cell v-for="(item,index) in history" :key="index" :title="item" @click="clickHistory(item)">
        <van-icon name="close" @click.stop="delHistory(index)" />
      </van-cell>
    </van-cell-group>
    <!-- /搜索历史记录 -->
  </div>
</template>

<script>
import { reqSuggestion } from '@/api/search'
import { getHistory, setHistory } from '@/utils/storage'
export default {
  name: 'Search',
  data() {
    return {
      keyword: '', // 搜索关键字
      suggestionList: [],
      history: getHistory() || [],
      timeout: null
    }
  },
  computed: {
    showSuggestion() {
      const regExp = new RegExp(this.keyword, 'ig')
      const arr = this.suggestionList.map(item => {
        const str = item.replace(regExp, (match) => {
          return `<span style='color:red'>${match}</span>`
        })
        return str
      })
      return arr
    }
  },
  methods: {
    GetSuggestion() {
      if (this.timeout !== null) clearTimeout(this.timeout)
      this.timeout = setTimeout(async() => {
        if (this.keyword.trim() === '') {
          this.suggestionList = []
          return
        }
        const { data: { options }} = await reqSuggestion(this.keyword)
        console.log(options)
        this.suggestionList = options
      }, 500)
    },
    // 点击搜索添加历史记录==================
    clickAddHistory() {
      if (this.keyword.trim() === '') return
      this.addHistory(this.keyword)
      setHistory(this.history)
    },
    // 点击匹配词添加历史记录================
    clickSuggestion(index) {
      this.addHistory(this.suggestionList[index])
      setHistory(this.history)
    },
    // 封装添加历史记录方法=============
    addHistory(str) {
      const index = this.history.findIndex(item => item === str)
      if (index === -1) { this.history.unshift(str) }
      this.$router.push({
        path: '/searchList',
        query: {
          keyword: str
        }
      })
    },
    // 删除历史记录=================
    delHistory(index) {
      this.history.splice(index, 1)
      setHistory(this.history)
    },
    clickHistory(str) {
      this.$router.push({
        path: '/searchList',
        query: {
          keyword: str
        }
      })
    }
  }}
</script>
<style lang="scss" scoped>

</style>
